<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hash-table</title>
    <link rel="shortcut icon" href="/static/imgs/favicon.ico"/>
    <link type="text/css" rel="styleSheet" href="/static/css/table.css"/>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
</head>
<body>

<div id="app">

    <div class="search bar6">
        <form onsubmit= "return false">
            <input type="text" placeholder="请输入您要搜索的内容..." v-model="cid">
            <button @click = search(cid)></button>
        </form>

    </div>

    <div v-show="table">
        <table class="gridtable" v-show={{ .show }}>
            <tr>
                <th>File/Folder</th><th>Cid</th><th>Timestamp</th><th>PreHash</th><th>Owner</th><th>Describe</th>
            </tr>

            {{ range $i,$v := .item }}

                <tr>
                    <td><a :href="url" target="_blank" @click=checkout({{ $i }}) >{{ $v.PathName }}</a></td><td ref={{ $i }}>{{ $v.Cid }}</td><td>{{ $v.Timestamp}}</td><td>{{ $v.PreHash}}</td><td>{{ $v.Owner}}</td><td>{{ $v.Describe}}</td>
                </tr>
            {{ end }}
        </table>
    </div>

    <div v-show="detail">
        <table class="gridtable" >
            <tr>
                <th>File/Folder</th><th>Cid</th><th>Timestamp</th><th>PreHash</th><th>Owner</th><th>Describe</th>
            </tr>
            <tr>
                <td><a :href="url" target="_blank" @click=checkdetial([[obj.Cid]])>[[obj.PathName]]</a></td><td>[[obj.Cid]]</td><td>[[obj.Timestamp]]</td><td>[[obj.PreHash]]</td><td>[[obj.Owner]]</td><td>[[obj.Describe]]</td>
            </tr>
        </table>
        <div class="back">
            <button class="goback" @click="goback">返回</button>
        </div>
    </div>
</div>
<script>
    var app = new Vue({
        delimiters:['[[',']]'],
        el:"#app",
        data:{
            url:"",
            baseUrl:"http://127.0.0.1:8080/ipfs/",
            cid:"",
            detail:false,
            table:true,
            obj:{},
        },
        methods:{
            checkout:function (id) {

                this.url = this.baseUrl+this.$refs[id].innerHTML
            },
            search:function (cid) {
                var url =  "http://127.0.0.1:9000?detail=" + cid
                var that = this
                axios.get(url).then(
                    function (response) {
                        that.cid = ""
                        that.detail =true
                        that.table = false
                        that.obj = response.data
                        // console.log(that.obj)
                    }
                ).catch(function (err) {
                    console.log(err)
                })
            },
            checkdetial:function (cid) {
                this.url = this.baseUrl+cid
            },
            goback:function () {
                this.table = true
                this.detail = false
            }

        },

    })

</script>

</body>
</html>